<script src="lib/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" type="text/css" href="lib/bootstrap-3.3.7.css" />


<div id="app">
  <temp @foo="way"></temp>
  <ul class="list-group">
    <li class="list-group-item" v-for="item in list">
      <span class="badge">评论人{{item.user}}</span> {{item.content}}
    </li>
  </ul>
</div>

<template id="templateid">
  <div>
    <div class="form-group">
      <label for="">评论人：</label><input type="text" class="form-control" v-model="user" />
    </div>
    <div class="form-group">
      <label for="">评论内容: </label><textarea class="form-control" v-model="content"></textarea>
    </div>
    <div class="form-group">
      <input type="button" id="" value="发表" class="btn btn-primary" @click="submit" />
    </div>
  </div>
</template>


<script type="text/javascript">
  var template = {
    template: "#templateid",
    data() {
      return {
        user: ' ',
        content: '',
      }
    },
    methods: {
      submit() {
        var fromcontent = {
          user: this.user,
          content: this.content,
          id: Date.now()
        }
        var data = JSON.parse(localStorage.getItem('cmts') || '[]');
        data.unshift(fromcontent);
        localStorage.setItem('cmts', JSON.stringify(data))
        this.user = this.content = '';
        this.$emit('foo')
      }
    }
  }

  var vm = new Vue({
    el: '#app',
    data: {
      list: [{
        user: "李白",
        content: "天生我材必有用",
        id: Date.now()
      },
      {
        user: "李白",
        content: "天生我材必有用",
        id: Date.now()
      },
      {
        user: "李白",
        content: "天生我材必有用",
        id: Date.now()
      },
      ]
    },
    created() {
      this.way();
    },
    methods: {
      way() {
        var data = JSON.parse(localStorage.getItem('cmts') || '[]');
        this.list = data;
      }
    },
    components: {
      temp: template,
    }
  })
</script>